<template>
  <div>
    <Card :bordered="false" dis-hover class="ivu-mt" :padding="0">
        <div class="new_card_pd">
          <!-- 筛选条件 -->
          <Form ref="searchForm" :model="tableFrom" inline :label-width="labelWidth" :label-position="labelPosition" @submit.native.prevent>
            <FormItem label="审核状态：" prop="status">
                <Select v-model="tableFrom.status" placeholder="请选择" clearable element-id="status" style="width:250px;" @on-change="getList(1)">
                  <Option v-for="item in statusList" :value="item.value" :key="item.value"
                    >{{ item.label }}
                  </Option>
                </Select>
            </FormItem>
            <FormItem label="分类名称：" prop="category_id">
                <Select v-model="tableFrom.category_id" placeholder="请选择" clearable element-id="status" style="width:250px;" @on-change="getList(1)">
                  <Option v-for="item in cateSelect" :value="item.value" :key="item.value"
                    >{{ item.label }}
                  </Option>
                </Select>
            </FormItem>
            <FormItem label="话题名称：" prop="topic_id">
                <Select v-model="tableFrom.topic_id" placeholder="请选择" clearable element-id="topic_id" style="width:250px;" @on-change="getList(1)">
                  <Option v-for="item in topicSelect" :value="item.value" :key="item.value"
                    >{{ item.label }}
                  </Option>
                </Select>
            </FormItem>
            <FormItem label="是否显示：" prop="is_show">
                <Select v-model="tableFrom.is_show" placeholder="请选择" clearable element-id="status" style="width:250px;" @on-change="getList(1)">
                  <Option value="1">显示</Option>
                  <Option value="0">不显示</Option>
                </Select>
            </FormItem>
            <FormItem label="作者：" prop="username">
              <Input v-model="tableFrom.username"  placeholder="请输入文章作者" @keyup.enter.native="getList(1)" clearable style="width:250px;"/>
            </FormItem>
            <FormItem label="关键字：" prop="keyword">
              <Input v-model="tableFrom.keyword"  placeholder="请输入文章标题" @keyup.enter.native="getList(1)" clearable style="width:250px;"/>
            </FormItem>
            <FormItem>
              <Button type="primary" @click="getList(1)" style="margin-right: 10px;">查询</Button>
              <Button class="ResetSearch" @click="searchReset('searchForm')">重置</Button>
            </FormItem>
          </Form>
        </div>
    </Card>
    <Card :bordered="false" dis-hover class="ivu-mt listbox">
      <div class="new_tab">
        <!-- Tab栏切换 -->
        <Tabs v-model="tableFrom.is_type" @on-click="getList(1)">
          <TabPane
              :label="item.title +'('+item.count +')' "
              :name="item.type.toString()"
              v-for="(item, index) in headeNum"
              :key="index"
          />
        </Tabs>
        <vxe-table
          :data="tableData"
          ref="xTable"
          class="ivu-mt"
          highlight-hover-row
          :loading="listLoading"
          header-row-class-name="false"
          row-id="id"
          :tree-config="{lazy: true, children: 'children',hasChild: 'children',reserve: true}">
        <vxe-column field="community_id" title="ID" min-width="80"></vxe-column>
        <vxe-column field="title" title="标题" min-width="100"></vxe-column>
        <vxe-column field="author.nickname" title="作者" min-width="100">
        </vxe-column>
        <vxe-column field="image" :title="tableFrom.is_type == 1 ? '图文封面' : '视频封面图'" min-width="150">
          <template v-slot="{ row }">
            <viewer>
              <div style="display: flex;flex-wrap: wrap;">
                <img v-for="(item,index) in row.image" v-lazy="item" :key="index" style="margin-right: 5px;margin-top:5px"/>
              </div>
            </viewer>
          </template>
        </vxe-column>
        <vxe-column field="start" title="推荐级别"  min-width="150">
          <template v-slot="{ row }">
            <Rate
            disabled
            v-model="row.start" style="font-size: 18px;color: blue;" >
           </Rate>
          </template>
        </vxe-column>
        <vxe-column field="pv" :title="tableFrom.is_type == 1 ? '浏览量' : '播放量'" min-width="100"></vxe-column>
        <vxe-column field="count_start" title="点赞数" min-width="100"></vxe-column>
        <vxe-column field="count_reply" title="评论数" min-width="100"></vxe-column>
        <vxe-column field="create_time" title="发布时间" min-width="150"></vxe-column>
        <vxe-column field="is_show" title="是否显示" min-width="100">
          <template v-slot="{ row }">
              <i-switch v-model="row.is_show" :value="row.is_show" :true-value="1" :false-value="0" @on-change="onchangeIsShow(row)" size="large">
                  <span slot="open">显示</span>
                  <span slot="close">隐藏</span>
              </i-switch>
          </template>
        </vxe-column>
        <vxe-column title="状态" min-width="100">
          <template v-slot="{ row }">
            <span>{{ row.status | communityStatus }}</span>
            <span
              v-if="row.status == -1"
              style="display: block; font-size: 12px; color: red;"
            >原因： {{ row.refusal }}</span>
          </template>
        </vxe-column>
        <vxe-column field="action" title="操作" align="center" min-width="200" fixed="right">
          <template v-slot="{ row,index }">
            <a @click="onDetail(row.community_id)">详情</a>
            <Divider type="vertical"/>
            <a v-if="row.status == 0 || row.status == -2" @click="onAudit(row.community_id)">审核</a>
            <Divider v-if="row.status == 0 || row.status == -2" type="vertical"/>
            <a @click="onEdit(row.community_id)">编辑星级</a>
            <Divider type="vertical"/>
            <a v-if="row.status == 1" @click="onOff(row.community_id)">强制下架</a>
            <Divider v-if="row.status == 1" type="vertical"/>
            <a @click="onReply(row.community_id)">查看评论</a>
            <Divider type="vertical"/>
            <a @click="del(row,'确定删除该内容',index)">删除</a>
          </template>
        </vxe-column>
      </vxe-table>
      <vxe-pager class="mt20" border size="medium" :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Total']"
        :current-page="tableFrom.page"
        :page-size="tableFrom.limit"
        :total="total"
        @page-change="handlePageChange">
    </vxe-pager>
      </div>
    </Card>
    <!--审核-->
    <Modal v-model="examineVisible" title="审核" :visible.sync="examineVisible" width="600px">
       <Form ref="ruleForm" :model="ruleForm" :rules="rules" size="small" :label-width="labelWidth"
       :label-position="labelPosition">
        <FormItem label="审核状态：" prop="status">
          <RadioGroup v-model="ruleForm.status">
            <Radio label="1">通过</Radio>
            <Radio label="-1">拒绝</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem label="原因" prop="refusal" v-if="ruleForm.status==-1">
          <Input v-model="ruleForm.refusal" type="textarea" placeholder="请输入原因" v-width="'50%'"/>
        </FormItem>
        <FormItem>
          <div style="text-align: right;">
            <Button @click="examineVisible=false" style="margin-right: 10px;;">取消</Button>
            <Button type="primary" @click="onSubmit">提交</Button>
          </div>
        </FormItem>
      </Form>
      <div slot="footer"></div>
    </Modal>
    <!-- 视频内容 -->
    <Modal v-model="showVideo" title="视频内容" :visible.sync="showVideo" width="680px">
      <div v-if="showVideo" class="video-container">
        <video style="width:600px;max-height: 500px;border-radius:10px;" :src="formData.video_link" autoplay controls="controls">
        您的浏览器不支持 video 标签。
        </video>
      </div>
      <div slot="footer"></div>
    </Modal>
    <!--详情-->
    <Modal v-model="dialogVisible"  title="详情" :visible.sync="dialogVisible" width="650px">
      <div class="box-container">
        <div class="basic-info">
          <div class="title">基本信息</div>
          <div class="acea-row">
            <div class="list sp100">
              <label class="name">{{tableFrom.is_type == 1 ? '图文封面：' : '视频封面：'}}</label>
              <div style="display: flex;">
                <span v-for="(item, index) in formData.image" :key="index">
                  <viewer>
                    <img v-lazy="item" :key="index" style="margin-right: 5px;"/>
                  </viewer>
                </span>
              </div>
            </div>
            <div v-if="formData.is_type == 2" class="list sp100">
              <label class="name">短视频：</label>
              <span class="video-img" @click="showVideo=true">
                <img v-lazy="formData.image[0]" style="width: 60px;height: 60px;"/>
                <span>
                  <i class="el-icon-caret-right"></i>
                </span>
              </span>
            </div>
            <div class="list sp100">
              <label class="name">文章内容：</label>
              <div>{{formData.content}}</div>
            </div>   
          </div>
        </div>
        <div class="title" style="margin-top: 20px;">内容信息：</div>
        <div class="acea-row">   
          <div class="list sp">
            <label class="name">{{formData.type == 1 ? '浏览量：' : '播放量：'}}</label>
            <div>{{ formData.pv }}</div>
          </div>  
          <div class="list sp">
            <label class="name">话题：</label>
            {{ (formData.topic&&formData.topic.topic_name) || '-' }}
          </div>
          <div class="list sp">
            <label class="name">作者：</label>
            {{ (formData.author && formData.author.nickname) || '-' }}
          </div>
          <div class="list sp">
            <label class="name">作者ID：</label>
            {{ (formData.author && formData.author.uid) || '-' }}
          </div>
          <div class="list sp">
            <label class="name">发布时间：</label>
            {{ formData.create_time }}
          </div>
          <div v-if="formData.status==1" class="list sp">
            <label class="name">审核通过时间：</label>
            {{ formData.status_time }}
          </div>
        </div>
      </div>
      <div slot="footer"></div>
    </Modal>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import {
  communityListApi, communityStatusApi, communityUpdateApi, communityAuditApi, communityDetailApi, communityDeleteApi, communityOffApi,
   communityCateOptionApi, communityTopicOptionApi, communityTitleApi
} from '@/api/community'
export default {
  name: 'communityTopic',
  data() {
    return {
      moren: require("@/assets/images/f.png"),
      colors: ['#99A9BF', '#F7BA2A', '#FF9900'],
      isChecked: false,
      listLoading: true,
      tableData: [],
      total:0,
      tableFrom: {
        page: 1,
        limit: 20,
        is_type: '1',
        status: "",
        keyword: "",
        username: "",
        category_id: "",
        topic_id: ""
      },
      statusList: [
        { label: "审核通过", value: 1 },
        { label: "待审核", value: 0 },
        { label: "审核未通过", value: -1 },
        { label: "下架", value: -2 },
      ],
      headeNum: [
        {title: "图文内容", count: 18, type: 1},
        {title: "短视频内容", count: 30, type: 2},
      ],
      cateSelect: [],
      topicSelect: [],
      dialogVisible: false,
      examineVisible: false,
      loading: false,
      isExamine: false,
      showVideo: false,
      community_id: "",
      formData: {},
      rules: {
        status: [
          { required: true, message: '请选择审核状态', trigger: 'change' }
        ],
        refusal: [
          { required: true, message: '请填写拒绝原因', trigger: 'blur' }
        ]
      },
      ruleForm: {
        refusal: '',
        status: "1",
      },
    }
  },
  computed:{
    ...mapState('admin/layout', [
          'isMobile'
      ]),
    labelWidth () {
      return this.isMobile ? undefined : 96;
    },
    labelPosition () {
      return this.isMobile ? 'top' : 'right';
    }
  },
  mounted() {
    this.getList(1)
    this.getCateSelect()
    this.getTopicSelect()
    this.getHeaderData()
  },
  methods: {
    handlePageChange ({ currentPage, pageSize }) {
      this.tableFrom.page = currentPage
      this.tableFrom.limit = pageSize
      this.getList(1)
    },
    /**重置 */
    searchReset(name){
      this.$refs[name].resetFields();
      this.getList(1)
    },
    // 分类列表；
    getCateSelect() {
      communityCateOptionApi()
        .then((res) => {
          this.cateSelect = res.data;
        })
        .catch((res) => {
          this.$message.error(res.message);
        });
    },
     // tab栏标题
    getHeaderData() {
      communityTitleApi()
        .then((res) => {
          this.headeNum = res.data;
        })
        .catch((res) => {
          this.$Message.error(res.message);
        });
    },
    // 话题列表；
    getTopicSelect() {
      communityTopicOptionApi()
        .then((res) => {
          this.topicSelect = res.data;
        })
        .catch((res) => {
          this.$Message.error(res.message);
        });
    },
    // 列表
    getList(num) {
      this.listLoading = true
      this.tableFrom.page = num ? num : this.tableFrom.page
      communityListApi(this.tableFrom).then(res => {
        console.log(res);
        this.tableData = res.data.list
        this.total = res.data.count
        this.listLoading = false
      }).catch(res => {
        this.listLoading = false
        this.$Message.error(res.message)
      })
    },
    pageChange(page) {
      this.tableFrom.page = page
      this.getList('')
    },
    handleSizeChange(val) {
      this.tableFrom.limit = val
      this.getList('')
    },
    // 编辑
    onEdit(id) {
      this.$modalForm(communityUpdateApi(id)).then(() => this.getList(''))
    },
    // 查看评论
    onReply(id) {
      this.$router.push({
        path: "reply",
        query: {
          community_id: id,
        },
      });
    },
    // 审核
    onAudit(id) {
      this.community_id = id;
      this.examineVisible = true;
    },
    // 详情
    onDetail(id) {
      this.community_id = id;
      this.dialogVisible = true;
      communityDetailApi(id).then((res) => {
        this.formData = res.data
      }).catch(( res ) => {
        this.$Message.error(res.msg)
      })
    },
    // 强制下架
    onOff(id){
      this.$modalForm(communityOffApi(id)).then(() => this.getList(''))
    },
    onSubmit() {
      communityAuditApi(this.community_id,this.ruleForm).then(res => {
        this.$Message.success(res.msg)
        this.examineVisible = false
        this.ruleForm.status = "1";
        this.ruleForm.refusal = "";
        this.getList('')
      }).catch(res => {
        this.$Message.error(res.msg)
      })
    },
    // 删除
    del (row, tit, num) {
      let delfromData = {
          title: tit,
          num: num,
          url: `community/del/${row.community_id}`,
          method: 'DELETE',
          ids: ''
      };
      this.$modalSure(delfromData).then((res) => {
          this.$Message.success(res.msg);
          this.getList();
          this.getHeaderData();
      }).catch(res => {
          this.$Message.error(res.msg);
      });
    },
    onchangeIsShow(row) {
      communityStatusApi(row.community_id, row.is_show).then((res) => {
        this.$Message.success(res.msg)
      }).catch((res ) => {
        this.$Message.error(res.msg)
      })
    }
  }
}
</script>

<style scoped lang="stylus">
.box-container {
  overflow: hidden;
}
.box-container .title{
  color: #17233d;
  font-size: 14px;
  font-weight: bold;
  line-height: 15px;
  padding-left: 5px;
  border-left: 3px solid var(--prev-color-primary);
}
.box-container .list {
  margin-top: 15px;
  font-size: 13px;
}
.box-container .sp {
  flex: 0 0 calc(100% / 2);
  display: flex;
}
.box-container .sp100 {
  flex: 0 0 calc(100% / 1);
  display: flex;
}
.box-container .basic-info{
  padding-bottom: 14px;
  border-bottom: 1px solid #F5F5F5;
}
.box-container .list .name {
  display: inline-block;
  width: 100px;
  text-align: right;
  color: #606266;
}
.box-container .basic-info .name{
  width: 80px;
}
.video-img{
  position: relative;
  width: 60px;
  height: 60px;
  &::before{
    content: "";
    width: 60px;
    height: 60px;
    background: rgba(0,0,0,.1);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    cursor: pointer;
  }
  span{
    width: 16px;
    height: 16px;
    background: rgba(0,0,0,.5);
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 22px;
    left: 22px;
    z-index: 12;
    .el-icon-caret-right{
      color: #ffffff;
      font-size: 16px;
    }
  }
}
/deep/.ivu-rate-star-full:before{
  color: #99A9BF;
}
/deep/.ivu-dropdown-item{
  font-size: 12px!important;
}
/deep/.vxe-table--render-default .vxe-cell{
  font-size: 12px;
}
.expand-row{
  margin-bottom: 16px;
  font-size: 12px;
}
.tdinfo {
  margin-left: 88px;
  margin-top: 15px;
}
.padding-add {
  padding: 20px 20px 0;
}
.input-add {
  max-width:250px;
}
.labelInput {
  max-width:250px;
  border: 1px solid #dcdee2;
  padding: 0 5px;
  border-radius: 5px;
  min-height: 30px;
  cursor: pointer;

  .span {
    color: #c5c8ce;
  }

  .iconxiayi {
    font-size: 12px;
  }
}

.picBox {
  display: inline-block;
  cursor: pointer;

  .upLoad {
    width: 58px;
    height: 58px;
    line-height: 58px;
    border: 1px dotted rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.02);
  }

  .pictrue {
    width: 60px;
    height: 60px;
    border: 1px dotted rgba(0, 0, 0, 0.1);
    margin-right: 10px;

    img {
      width: 100%;
      height: 100%;
    }
  }
}

.userFrom {
  >>> .ivu-form-item-content {
    margin-left: 0px !important;
  }
}

.userAlert {
  margin-top: 20px;
}

.userI {
  color: #1890FF;
  font-style: normal;
}

img {
  height: 36px;
  display: block;
}

.tabBox_img {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  cursor: pointer;

  img {
    width: 100%;
    height: 100%;
  }
}

.tabBox_tit {
  width: 60%;
  font-size: 12px !important;
  margin: 0 2px 0 10px;
  letter-spacing: 1px;
  padding: 5px 0;
  box-sizing: border-box;
}

.modelBox {
  >>> .ivu-modal-body {
    padding: 0 16px 16px 16px !important;
  }
}

.vipName {
  color: #dab176;
}

.listbox {
  >>>.ivu-divider-horizontal {
    margin: 0 !important;
  }
}

/deep/.ivu-table-header {
  // overflow visible
}

/deep/.ivu-table th {
  overflow: visible;
}

/deep/.select-item:hover {
  background-color: #f3f3f3;
}

/deep/.select-on {
  display: block;
}

/deep/.select-item.on {
  /* background: #f3f3f3; */
}
.pane_pd{
  padding:4px 16px 20px !important;
  font-weight: 500;
}
.new_tab {
  >>>.ivu-tabs-nav .ivu-tabs-tab{
    padding:4px 16px 20px !important;
    font-weight: 500;
  }
}
.dateMedia{
  /deep/.ivu-form-item-content{
    max-width 250px;
    /deep/.ivu-date-picker{
      width 100%;
    }
  }
}
.select-tag{
  position: relative;
  min-height: 32px;
  padding: 0 24px 0 4px;
  border: 1px solid #dcdee2;
  border-radius: 4px;
  line-height: normal;
  user-select: none;
  cursor: pointer;

  &:hover {
    border-color: #57a3f3;
  }

  .ivu-icon {
    position: absolute;
    top: 50%;
    right: 8px;
    line-height: 1;
    transform: translateY(-50%);
    font-size: 14px;
    color: #808695;
    transition: all .2s ease-in-out;
  }

  .ivu-tag {
    position: relative;
    max-width: 99%;
    height: 24px;
    margin: 3px 4px 3px 0;
    line-height: 22px;
  }

  .placeholder {
    display: block;
    height: 30px;
    line-height: 30px;
    color: #c5c8ce;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-left: 4px;
    padding-right: 22px;
  }
}

>>> .batch-modal {
  .ivu-modal-body {
    padding: 0;
  }

  .ivu-alert {
    margin: 12px 24px;
  }

  .ivu-col-span-4 {
    flex: none;
    width: 130px;
  }

  .ivu-col-span-20 {
    padding-right: 37px;
  }

  .ivu-input-number {
    width: 100%;
  }

  .ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu) {
    z-index: auto;
  }

  .ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu):after {
    right: auto;
    left: 0;
  }

  .ivu-menu-item {
    padding-right: 0;
  }
}
</style>